import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
// 导入actionCreater
import { inscrement, decrement, addToNum } from './store/modules/counterStore'
import { fetchChannlList } from './store/modules/channelStore'

function App () {
  // 在React组件中使用store中的数据，需要用到一个 钩子函数 - useSelector，
  // 它的作用是把store中的数据映射到组件中，使用样例如下：
  // state.counter对应store/index.js里配置的counter
  const { count } = useSelector(state => state.counter)

  // React组件中修改store中的数据需要借助另外一个hook函数 - useDispatch，
  // 它的作用是生成提交action对象的dispatch函数，使用样例如下：
  const dispatch = useDispatch()

  const {channelList} = useSelector(state => state.channel)
  // 使用useEffect触发异步请求执行
  useEffect(() => {
    dispatch(fetchChannlList())
  }, [dispatch])
  
  return (
    <div className="App">
      {/* 调用dispatch提交action对象 */}
      <button onClick={() => dispatch(decrement())}>-</button>
      {count}
      <button onClick={() => dispatch(inscrement())}>+</button>
      {/* 提交action传参 */}
      <button onClick={() => dispatch(addToNum(10))}>add to 10</button>
      <button onClick={() => dispatch(addToNum(20))}>add to 20</button>

      <ul>
        {channelList.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </div>
  )
}

export default App
